<template>
  <div class="login-container">
    <n-card title="用户登录" class="login-card">
      <n-form
        ref="formRef"
        :model="formValue"
        :rules="rules"
        label-placement="left"
        label-width="auto"
        require-mark-placement="right-hanging"
      >
        <n-form-item label="用户名" path="username">
          <n-input v-model:value="formValue.username" placeholder="请输入用户名或邮箱" />
        </n-form-item>
        <n-form-item label="密码" path="password">
          <n-input
            v-model:value="formValue.password"
            type="password"
            placeholder="请输入密码"
            @keypress.enter="handleLogin"
          />
        </n-form-item>
        <n-row :gutter="[0, 24]">
          <n-col :span="24">
            <div style="display: flex; justify-content: space-between">
              <n-button
                type="primary"
                :loading="loading"
                :disabled="loading"
                @click="handleLogin"
              >
                {{ loading ? '登录中...' : '登录' }}
              </n-button>
              <n-button @click="goToRegister">
                注册账号
              </n-button>
            </div>
          </n-col>
        </n-row>
      </n-form>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import type { FormInst, FormRules } from 'naive-ui'
import { useUserStore } from '../../stores/userStore'

// 导入Naive UI组件
import {
  NCard,
  NForm,
  NFormItem,
  NInput,
  NRow,
  NCol,
  NButton
} from 'naive-ui'

const router = useRouter()
const message = useMessage()
const userStore = useUserStore()

const formRef = ref<FormInst | null>(null)
const loading = ref(false)

const formValue = ref({
  username: '',
  password: ''
})

const rules: FormRules = {
  username: {
    required: true,
    message: '请输入用户名或邮箱',
    trigger: 'blur'
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }
}

const handleLogin = (e: Event) => {
  e.preventDefault()
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      loading.value = true
      try {
        const result = await userStore.login(formValue.value.username, formValue.value.password)
        if (result.success) {
          message.success('登录成功')
          // 添加一些延迟确保消息显示
          setTimeout(() => {
            router.push('/tasks')
          }, 500)
        } else {
          message.error(result.message || '登录失败')
        }
      } catch (error) {
        console.error('登录错误:', error)
        message.error('登录过程中发生错误')
      } finally {
        loading.value = false
      }
    } else {
      message.error('请填写正确的信息')
    }
  })
}

const goToRegister = () => {
  router.push('/register')
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.login-card {
  width: 100%;
  max-width: 400px;
}
</style>